<template>
  <div id="background" class="background">
    <CesiumMap ref= "cesiumMap"/>
    <MapTitle ref= "mapTitle" />
    <ToolBar />
    <div v-show= "showDetectorCharts" class = "detectorChartBox" >
      <img @click= "hideDetectorCharts()" class= "detectorChartBoxHideButton" src= "../assets/exitButton.png" alt="">
      <div class = "detectorInfo">
          <p :class = "detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal ? 'title':'title detectorInfoWarningState'">
            <img   :src= "detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal? require('../assets/exhaustPipe.png'): require('../assets/warningSymbol.png')" alt="">
            {{detectorInfos[currentShowDetailDetectorIndex].title}}
          </p>
          <p class = "detail">设备类型：<span :style= "detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal?'':'color:#FF050D'">{{detectorInfos[currentShowDetailDetectorIndex].mechineType}}</span><span :style= "detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal?'':'color:#FF1F1F'">{{detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal?'（在线）':'（不在线）'}}</span></p>
          <p class = "detail">探头ID：{{detectorInfos[currentShowDetailDetectorIndex].propeID}}</p>
          <p class = "detail">当前值：{{detectorInfos[currentShowDetailDetectorIndex].currentValue}}</p>
          <p class = "detail">阈值范围：{{detectorInfos[currentShowDetailDetectorIndex].thresholdRange}}</p>
          <div v-if= "!detectorInfos[currentShowDetailDetectorIndex].mechineIsNormal" class="detectorChartSureButton">确定</div>
      </div>
      <!-- 剩余信息 -->
      <div class= "surplusInfo">
        <div  class="detectorChart" ref="chart" ></div> 
        <!-- 可以往里加 -->
      </div>     
    </div>
    <RightNavigation v-if = "showNavigation" v-bind:navigation_data= "rightNavigationData" />
    <div class="videoBox">
      <SurveillanceVideo v-for= "item in videoItems" :key= "item.videoId" v-bind:video_ata= "item" ref="surveillanceVideo" />
    </div>
    <FireControlDectectorInfo ref= "fireControlDetectorInfo"/>
  </div> 
</template>

<script>
import CesiumMap from '@/components/CesiumMap.vue'
import MapTitle from '@/components/common/MapTitle.vue'
import ToolBar from '@/components/common/ToolBar.vue'
import RightNavigation from '@/components/common/RightNavigation.vue'
import SurveillanceVideo from '@/components/common/SurveillanceVideo.vue'
import FireControlDectectorInfo from '@/components/common/FireControlDetectorInfo.vue'

import bus from '../eventBus'
export default {
  name: 'DetectorChats',
  components: {
    CesiumMap,
    MapTitle,
    ToolBar,
    RightNavigation,
    SurveillanceVideo,
    FireControlDectectorInfo,
  },
  data(){
    return{
      chart:{},
      detectorInfos:[
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:1,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:2,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:3,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:4,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:5,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:6,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:7,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:8,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:9,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:10,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:11,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:12,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:13,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:14,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:15,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:16,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:17,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:18,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:19,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:20,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:21,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:22,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:23,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:24,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:25,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:26,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:27,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:28,
        },{
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:29,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:30,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:31,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:32,
        },
        {
          title: '废气检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:33,
        },
         {
          title: '废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:34,
        },
        {
          title: '废渣检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "80HI",  //当前值
          thresholdRange: "78HI~100HI", //阈值范围    
          mechineIsNormal: true ,//机器是否正常
          detectorId:35,
        },
        {
          title: '危险源灌区-废水检测器-正常',  //标题
          mechineType: '探测器', //设备类型
          propeID: "7293GFAU",  //探头ID
          currentValue: "67HI",  //当前值
          thresholdRange: "78HI~890HI", //阈值范围    
          mechineIsNormal: false ,//机器是否正常
          detectorId:36,
        },
      ],
      //区域选择数据
      regionSelectData:[
        { 
          regionId:1,
          regionName:'区域一安装大大多撒大所大所大',
          aeraPoint:[111.4, 34.8, 111.404, 34.8,111.404,34.804,111.4,34.804,111.4,34.8]
        },{ 
          regionId:2,       
          regionName:'区域二',
          aeraPoint:[110.4, 34.8, 110.404, 34.8,110.404,34.804,110.4,34.804,110.4,34.8]
        },{ 
          regionId:3,    
          regionName:'区域三',
          aeraPoint:[112.4, 34.8, 112.404, 34.8,112.404,34.804,112.4,34.804,112.4,34.8]
        },{ 
          regionId:4,     
          regionName:'区域四',
          aeraPoint:[115.4, 34.8, 115.404, 34.8,115.404,34.804,115.4,34.804,115.4,34.8]
        },{ 
          regionId:5,      
          regionName:'区域五',
          aeraPoint:[111.4, 35.8, 111.404, 35.8,111.404,35.804,111.4,35.804,111.4,35.8]
        },{ 
          regionId:6,      
          regionName:'区域六',
          aeraPoint:[111.4, 30.8, 111.404, 30.8,111.404,30.804,111.4,30.804,111.4,30.8]
        },{ 
          regionId:7,      
          regionName:'区域七',
          aeraPoint:[111.4, 31.8, 111.404, 31.8,111.404,31.804,111.4,31.804,111.4,31.8]
        },{ 
          regionId:8,       
          regionName:'区域八',
          aeraPoint:[111.4, 40.8, 111.404, 40.8,111.404,40.804,111.4,40.804,111.4,40.8]
        }
      ],
      //广告牌数据,检查器
      billboardData:[
        {
          regionId:1,
          detectorDataArray:[
          {
            detectorId: 1,
            type: 'gas',
            position:{
              vectorX: 111.402,
              vectorY: 34.802,
              vectorZ: 50,
            },
            imageUrl:  require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{          
            detectorId: 2,
            type: 'water',
            position:{
              vectorX: 111.401,
              vectorY: 34.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 3,
            type: 'residue',
            position:{
              vectorX: 111.403,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
         },{
            detectorId: 4,
            type: 'danger',
            position:{
              vectorX: 111.401,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
         }
        ]},
        {
          regionId:2,
          detectorDataArray:[{
            detectorId: 5,
            type: 'gas',
            position:{
              vectorX: 110.402,
              vectorY: 34.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
          },{
            detectorId: 6,
            type: 'water',
            position:{
              vectorX: 110.401,
              vectorY: 34.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 7,
            type: 'residue',
            position:{
              vectorX: 110.403,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
         },{
            detectorId: 8,
            type: 'danger',
            position:{
              vectorX: 110.401,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
          },
        ]},
         {
          regionId:3,
          detectorDataArray:[{
            detectorId: 9,
            type: 'gas',
            position:{
              vectorX: 112.402,
              vectorY: 34.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{
            detectorId: 10,
            type: 'water',
            position:{
              vectorX: 112.401,
              vectorY: 34.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 11,
            type: 'residue',
            position:{
              vectorX: 112.403,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 12,
            type: 'danger',
            position:{
              vectorX: 112.401,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},
         {
          regionId:4,
          detectorDataArray:[{
            detectorId: 13,
            type: 'gas',
            position:{
              vectorX: 115.402,
              vectorY: 34.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{
            detectorId: 14,
            type: 'water',
            position:{
              vectorX: 115.401,
              vectorY: 34.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 15,
            type: 'residue',
            position:{
              vectorX: 115.403,
              vectorY: 34.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 16,
            type: 'danger',
            position:{
              vectorX: 115.401,
              vectorY: 34.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},
         {
          regionId:5,
          detectorDataArray:[{
            detectorId: 17,
            type: 'gas',
            position:{
              vectorX: 111.402,
              vectorY: 35.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{  
            detectorId: 18,
            type: 'water',
            position:{
              vectorX: 111.401,
              vectorY: 35.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 19,
            type: 'residue',
            position:{
              vectorX: 111.403,
              vectorY: 35.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 20,
            type: 'danger',
            position:{
              vectorX: 111.401,
              vectorY: 35.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},
         {
          regionId:6,
          detectorDataArray:[{
            detectorId: 21,
            type: 'gas',
            position:{
              vectorX: 111.402,
              vectorY: 30.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{
            detectorId: 22,
            type: 'water',
            position:{
              vectorX: 111.401,
              vectorY: 30.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 23,
            type: 'residu',
            position:{
              vectorX: 111.403,
              vectorY: 30.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 24,
            type: 'danger',
            position:{
              vectorX: 111.401,
              vectorY: 30.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},
         {
          regionId:7,
          detectorDataArray:[{
            detectorId: 25,
            type: 'gas',
            position:{
              vectorX: 111.402,
              vectorY: 31.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{
            detectorId: 26,
            type: 'water',
            position:{
              vectorX: 111.401,
              vectorY: 31.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 27,
            type: 'residue',
            position:{
              vectorX: 111.403,
              vectorY: 31.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 28,
            type: 'danger',
            position:{
              vectorX: 111.401,
              vectorY: 31.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},
         {
          regionId:8,
          detectorDataArray:[{
            detectorId: 29,
            type: 'gas',
            position:{
              vectorX: 111.402,
              vectorY: 40.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteGasLocation.png'),
            textMessage: '废气检查器',
         },{
            detectorId: 30,
            type: 'water',
            position:{
              vectorX: 111.401,
              vectorY: 40.803,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteWaterLocation.png'),
            textMessage: '废水检查器',
         },{
            detectorId: 31,
            type: 'residue',
            position:{
              vectorX: 111.403,
              vectorY: 40.801,
              vectorZ: 50,
            },
            imageUrl: require('../assets/wasteResidueLocation.png'),
            textMessage: '废渣检查器',
        },{
            detectorId: 32,
            type: 'danger',
            position:{
              vectorX: 111.401,
              vectorY: 40.802,
              vectorZ: 50,
            },
            imageUrl: require('../assets/dangerLocation.png'),
            textMessage: '危险灌源区-废气检查器V207GTB',
        }
        ]},           
      ],
      //视频地标
      videoBillboardData:[
        {
          videoId:1,
          position:{
            vectorX: 111.402,
            vectorY: 34.802,
            vectorZ: 50,
          },
          imageUrl: require('../assets/cameraBillboard.png'),  
          videoUrl:'http://vjs.zencdn.net/v/oceans.mp4',     
        },
        {
          videoId:2,
          position:{
            vectorX: 111.402,
            vectorY: 34.702,
            vectorZ: 50,
          },
          imageUrl: require('../assets/cameraBillboard.png'),
          videoUrl:'https://media.w3.org/2010/05/sintel/trailer.mp4'       
        }
      ],
      //消防地标
      fireControlBillboardData:[
        {
          fireControlId:1,
          position:{
            vectorX: 110.402,
            vectorY: 34.802,
            vectorZ: 50,
          },      
          imageUrl: require('../assets/fireHydrant.png'), 
        },
        {
          fireControlId:2,
          position:{
            vectorX: 110.402,
            vectorY: 34.702,
            vectorZ: 50,
          },
          imageUrl: require('../assets/fireExtinguisher.png'),     
        },
      ],
      //消防设备数据
      fireControlDetectorData:[
        {
          fireControlId:1,
          detectorName:'消防设备-消防栓',
          number:'TG-123123',
          location:'XX区-XX罐-XX仓',
          qualityGuaranteePeriod:'2010-9-10~2020-9-10',
          imageUrl:require('../assets/fireHydrantNoBackground.png')
        },
         {
          fireControlId:2,
          detectorName:'消防设备-灭火器',
          number:'TG-123123',
          location:'XX区-XX罐-XX仓',
          qualityGuaranteePeriod:'2010-9-10~2020-9-10',
          imageUrl:require('../assets/fireExtinguisherNoBackground.png')
        }
      ],
      //右侧导航栏需要的数据  示例在RightNavigation.vue
      rightNavigationData:{},

      showNavigation: false,
      showDetectorCharts: false,//显示设备图表
      currentShowDetailDetectorIndex: 0, //当前显示详情的设备的ID
      detectorBillboardIds:[],//标牌的id集合，用于删除

      videoBillboardIds:[],//视频的地标id
      videoItems:[],//显示的视频

      fireControlBillboardIds:[],//消防的地标id
    }
  },
  created(){
      bus.$on('getVideoData',(val)=>{
        val(this.videoItems[this.videoItems.length-1]);
      });
      bus.$on('closeVideo',(videoId)=>{
        this.videoItems.forEach((element,index)=>{
          if(element.videoId == videoId){
             this.videoItems.splice(index,1);
          }
        })
      })
  },
  mounted(){
    this.addlistenerOnLeftMouseButtonClick();
    this.$refs.mapTitle.init("环保设施");
    this.InitRightNavigationData();
  },
  methods:{
    //初始化图表
    initEcharts (yAxisDataArray) {
      //2.初始化
      if(Object.keys(this.chart).length === 0)
      {
          this.chart = this.$Echarts.init(this.$refs.chart);
      }     
      //3.配置数据
      let option = {
        tooltip : {
            trigger: 'axis',
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            // shadow: 'none',
            textStyle:{
              color:'#d2e8f7',
              fontSize:12,
            },
            axisPointer:{
              type: 'line',
              lineStyle:{
                color:'#00a3ff',
                type:'solid',
              }
            },
            //额外的css样式
              extraCssText: "box-shadow:none",
            //显示位置,pt代表鼠标位置，pt[0] x轴  pt[1] y轴
            position: function(pt) {
              return [pt[0]-61, pt[1]-95];
            },
            //显示的内容
            formatter(params){
              var str = `<div style = "display:flex;
                                        align-items: center;
                                        justify-content: center; 
                                        flex-direction: column;
                                        width:105px;
                                        height:89px; 
                                        padding-bottom:10px;
                                        background:url( ${require("../assets/toolTipBackground.png")}) 0 0 no-repeat; 
                                        background-size:100% 100%  ">
              <div>报警次数</div><div style =' font-weight: bold;font-size:15px;'>${params[0].data}次</div></div>`;
              return str;
            }
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月'],  
          axisTick:false, 
          axisLine:{
            lineStyle:{
              color : '#406a98'
            }
          },       
          axisLabel:{
            color : "#949db0",
          }         
        }, //X轴
        yAxis: {            
          name : '报警次数（单位：次）',
          nameTextStyle:{
            padding: [0 , 0 , 0 , 110],
            color:'#f5f6f7',
            fontSize:12,
            fontWeight: 'normal'
          },
          splitLine :false,
          axisTick :false,
          axisLine :{
            show: true,
            lineStyle:{
              color: '#406a98'
            },
          },
          axisLabel:{
            color : "#949db0",
          }   
        }, //Y轴
        lineStyle:{
          color: '#00a5fb',
        },
        series: [
          {
            data: yAxisDataArray,
            type: 'line',
            smooth:true,
            symbolSize :0,
            areaStyle:{
              color:{
                type: 'linear',//线性变化
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(19, 105, 169, 1)' // 0% 处的颜色
                },{
                    offset: 1, color: 'rgba(19, 105, 169, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }             
            },
          }], //配置项
      }      
      // 4.传入数据
      this.chart.setOption(option);
      this.showDetectorCharts = true;
    },
    //改变区域勾选状态
    changeRegionState(regionInfo){
      if(regionInfo.regionId == this.regionSelectData[0].regionId)
      {
        this.regionSelectData[0].state = !this.regionSelectData[0].state;
        this.regionSelectData.forEach((element,index) => {
            if(index>0){
              if(element.state != this.regionSelectData[0].state)
              {
                  element.state = this.regionSelectData[0].state; 
                if(element.state){
                  this.renderRegion(element,false);
                }else{
                  this.removeRegion(element);
                }    
              }         
          }   
          });       
      }else{
        this.regionSelectData.forEach((element)=> {
          if(element.regionId == regionInfo.regionId){
            element.state = !element.state;
            if(element.state){
              this.renderRegion(regionInfo,true);
            }else{
              this.removeRegion(element);
            }
            return;
          }           
        });
      }
    },
    //隐藏图表
    hideDetectorCharts(){
      this.showDetectorCharts = !this.showDetectorCharts;
    },
    //渲染设备显示区域
    renderDetectorRegion(regionInfo,isFlyTo){    
      let cesiumMap = this.$refs.cesiumMap;
      let _this =this;
      let area =  cesiumMap.renderLineByCartographicDegrees(regionInfo.aeraPoint,window.Cesium.Color.fromCssColorString('#4088c2'));
      if(isFlyTo){
        cesiumMap.viewerFlyToArea(area,-25.0);
      }   
      for(let i =0 ;i<_this.billboardData.length;i++){
        if(_this.billboardData[i].regionId == regionInfo.regionId){
            _this.billboardData[i].detectorDataArray.forEach(element => { 
              let isContain =false; 
              for(let j=0;j < _this.detectorBillboardIds.length;j++){
                if(element.detectorId == _this.detectorBillboardIds[j].detectorId){
                  isContain =true;
                  break;
                }
              }
              if(!isContain){
                let locationBillboard =  cesiumMap.renderDetectorLocationBillboard(element)
                _this.detectorBillboardIds.push({
                    detectorId: element.detectorId,
                    cesiumIds:[locationBillboard.billboard.id,locationBillboard.label.id,locationBillboard.bottomCircle.id,area.id]
                })
              }        
            });
          break;
        }
      }   
    },
    //移除该区域
    removeDetectorRegion(regionInfo){
      let cesiumMap = this.$refs.cesiumMap;
      let _this = this;
      for(let i =0;i<_this.billboardData.length;i++){
        if(_this.billboardData[i].regionId == regionInfo.regionId){
            for(let j =0;j<_this.billboardData[i].detectorDataArray.length;j++){
              for(let k =0;k<_this.detectorBillboardIds.length;k++){
                if(_this.detectorBillboardIds[k].detectorId == _this.billboardData[i].detectorDataArray[j].detectorId){
                  _this.detectorBillboardIds[k].cesiumIds.forEach(id=>{
                      cesiumMap.removeEntitiesObjectByID(id);
                  })
                  _this.detectorBillboardIds.splice(k,1);
                  break;
                }      
              }
            }
          break;
        }
      }     
    },
    //渲染视频地标
    renderVideoBillboard(){
      let cesiumMap = this.$refs.cesiumMap;
      this.videoBillboardData.forEach((element)=>{
        let tip =cesiumMap.renderVideoBillboard(element);
        this.videoBillboardIds.push(tip.billboard.id);
        this.videoBillboardIds.push(tip.bottomCircle.id);
      });
    },
    //移除视频地标
    removeVideoBillboard(){
      let cesiumMap = this.$refs.cesiumMap;
      this.videoBillboardIds.forEach(element => {
        cesiumMap.removeEntitiesObjectByID(element);
      });      
    },
    //渲染消防地标
    renderFireControlBillboard(){
      let cesiumMap = this.$refs.cesiumMap;
      this.fireControlBillboardData.forEach((element)=>{
        this.fireControlBillboardIds.push(cesiumMap.renderFireControlBillboard(element).id);
      });
    },
    //移除消防地标
    removeFireControlBillboard(){
      let cesiumMap = this.$refs.cesiumMap;
      this.fireControlBillboardIds.forEach(element => {
        cesiumMap.removeEntitiesObjectByID(element);
      });     
    },

    //注册鼠标左键点击事件
    addlistenerOnLeftMouseButtonClick(){
      let cesiumMap = this.$refs.cesiumMap;
      // 注册鼠标左键点击事件
      cesiumMap.addlistenerOnLeftMouseButtonClick((element)=>{
          if(this.onClickedDetectorBillboard(element)){
            return;
          }
          if(this.onClickedVideoBillboard(element)){
            return;
          }
          if(this.onClickedFireControlBillboard(element)){
            return;
          }
      });
    },
    //当点击到设备地标  element,cesiumMap中回调返回的对象
    onClickedDetectorBillboard(element){
      let _this = this;
      if(element.primitive.detectorId){
          let detectorId = element.primitive.detectorId
          _this.detectorInfos.forEach((el,index)=>{
            if(el.detectorId == detectorId){
              _this.currentShowDetailDetectorIndex = index;                
              //测试数据 图表
              let array = [];
              for(let i=0;i<6;i++)
              {
                array.push(Math.round(Math.random()*100));
              }
              _this.initEcharts(array);            
              return true;
            }
          })
      }else{
        return false;
      }
    },
    //当点击到视频地标
    onClickedVideoBillboard(element){
      let _this = this;
      if(element.primitive.videoId){
        if(_this.videoItems.length>0){
          _this.videoItems.forEach(el=>{
            if(el.videoId == element.primitive.videoId){
              return;
            }
          })            
        }
        _this.videoItems.push({
          videoId:element.primitive.videoId,
          videoUrl:element.primitive.videoUrl,
        })
      } 
    },
    //当点击到消防地标
    onClickedFireControlBillboard(element){
      let _this = this;
      if(element.primitive.fireControlId){
         _this.fireControlDetectorData.forEach(el=>{
           if(el.fireControlId == element.primitive.fireControlId){
             _this.$refs.fireControlDetectorInfo.init(el);
             return true
           }
         });
      }
      return false;
    },

    //初始化右侧导航栏的数据
    InitRightNavigationData(){
       let _this =this;
        this.rightNavigationData.defaultProps ={ 
          children: 'children',
          label: 'label'
          };
        this.rightNavigationData.titleData =[
          {
            titleId:1,
            title:'环保区域',
            url: require('../assets/environmentProtect.png'),
            // onClick: function(){ console.log(this.title)}
          },
          {
            titleId:2,
            title:'预案',
            url:require('../assets/environmentProtect.png'),
            // onClick:function(){ console.log(this.title)}
          },
        ];
        this.rightNavigationData.detailTitle = {
          title:'地标',
          url:require('../assets/environmentProtect.png'),
        };
        let treeData =[];
        this.regionSelectData.forEach(element=>{
            treeData.push({
              label: element.regionName,
              regionData:element,
              onChecked:function(){ _this.renderDetectorRegion({aeraPoint:this.regionData.aeraPoint,regionId:this.regionData.regionId},true)},
              onUnChecked:function(){_this.removeDetectorRegion({regionId:this.regionData.regionId})},
            })
        });
        treeData.push({
          label: "视频测试",
          onChecked:function(){ _this.renderVideoBillboard();},
          onUnChecked:function(){_this.removeVideoBillboard()},
        });
        treeData.push({
          label:'消防地标',
          onChecked:function(){_this.renderFireControlBillboard();},
          onUnChecked:function(){_this.removeFireControlBillboard();},
        });
        treeData.push({
          label:'测试',
          children:[
            {
              label:'子节点'
            },{
              label:'子节点2'
            }
          ]
        });
        this.rightNavigationData.treeData =treeData;
        this.showNavigation=true;
    }
  }
}
</script>

<style scoped lang="scss">
@import  '../css/reset.css';
  .background{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
  //图表------------------------------- 
  .detectorChartBox{
    width: 421.3px;
    height: 541.5px;
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 203px;
    left: 31px;
    background-image: url('../assets/regionBackground.png');
    background-size: 100% 100%;
  
  }

  .detectorChartBoxHideButton{
    width: 24px;
    height: 22px;
    position: absolute;
    right: 30px;
    bottom: 500px;   
  }

  .surplusInfo{
    width: 100%;
    flex: 1;
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling : touch; 
  }

  .detectorInfo{
    width: 100%;
  }

  .detectorInfo:after{
    content: ".";
    display: block;
    height: 2px;
    width: calc( 100% - 61px);
    margin-left: 31px;
    box-sizing: border-box;
    background-color: #435c82;
  }

  .detectorInfo .title{
    width: 100%;
    height: 25px;
    padding:35px 0 0 35px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    text-align: left;
    line-height: 25px;  
    color: #c9dfff;
  }

  .detectorInfo .detectorInfoWarningState{
    color: #FF2C2C;
  }

  .detectorInfo .title img{
    height: 25px;
    width: 25px;
    vertical-align: middle;
  }
  
  .detectorInfo .detail{
    width: 100%;
    height: 20px;
    padding-left: 67px;
    margin: 15px 0 15px 0;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-align: left;
    line-height: 14px;
    color: #ffffff;
  }

  .detectorInfo .detectorChartSureButton{
    width: 94.5px;
    height: 35.2px;
    margin:0 0 10px 297px;
    background-image: url('../assets/sureButton.png')  ;  
    background-size: 100% 100%;
    color: #bcdef7;
    line-height: 35.2px;   
  }

  .detectorChart{
    width:373.3px;
    height:280px;
    padding: 0px 0  0 24px;
  }

  .videoBox{
    padding-top: 100px;
  }
</style>
